<template>
    <div class="home">
        <div class="img">
             <img src="static/updata/banner.jpg" alt="" >
        </div>
		<ul class="list">
			<li v-for="(item, index) in list" :key="index">
				<i :class="item.icon"></i>
				<span>{{item.title}}</span>
			</li>
		</ul>
		<div class="title">
			<i class="iconfont icon-naozhong"></i>
			<p>ESL星际争霸2决赛即将开战！<span>08/15 22:00 7829人预定</span></p>
			<span>预定</span>
		</div>
		<div class="list_vadio">
			<Vadio v-for="(item, index) in data" :key="index" :list="item"></Vadio>

		</div>

		<!-- lol模块 -->
		<Game url="/lol" coll="lol" title="英雄联盟" icon="iconfont icon-lol1"></Game>
		<!-- 王者模块 -->
		<Game url="/lol" coll="wangzhe" title="王者荣耀" icon="iconfont icon-wangzherongyao1"></Game>
		<!-- dnf -->
		<Game url="/lol" coll="dnf" title="DNF" icon="iconfont icon-dnf"></Game>

    </div>
</template>


<style lang="scss" scoped>
    .home {
        margin-top: 15px;
        .img {
			height: 135px;
			padding: 0 10px;
			img {
				width: 100%;
				height: 100%;
				border-radius: 8px;
			}
        }
		.list {
			display: flex;
			flex-wrap: wrap;
			li {
				width: 20%;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 20px;
				i {
					font-size: 25px;
					margin-bottom: 10px;
				}
				.icon-dota {
					color: #FD6933;
				}
				.icon-caidan,
				.icon-dnf {
					color: #E14E2D;
				}
				.icon-iconyouxi2 {
					color: #E2EAEF;
				}
				.icon-juediqiushengshouyou {
					color: #FFD378;
				}
				.icon-lol,
				.icon-lol1,
				.icon-wangzherongyao1,
				.icon-icon-test {
					color:#DB9E3F ;
				}
				span {
					font-size: 12px;
				}
			}
		}
		.title {
			display: flex;
			align-items: center;
			margin-top: 10px;
			padding: 0 10px;
			font-size: 12px;
			height: 30px;
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
			p {
				padding: 0 8px;
				span {
					color: #ccc;
					border: none;
					padding: 0;
				}
			}
			span {
				color:#FD6933;
			}
		}
		.list_vadio {
			display: flex;
			flex-wrap: wrap;
		}
    }
</style>


<script>
import Vadio from '@/components/Vadio'
import Game from '@/components/Game'


export default {
	components: { Vadio, Game },
    data() {
        return {
			data: [],
			list: [
				{ title: '全部直播', icon: 'iconfont icon-caidan'},
				{ title: '英雄联盟', icon: 'iconfont icon-lol1'},
				{ title: '王者荣耀', icon: 'iconfont icon-wangzherongyao1'},
				{ title: '和平精英', icon: 'iconfont icon-icon-test'},
				{ title: 'LOL手游', icon: 'iconfont icon-lol1'},
				{ title: '主机游戏', icon: 'iconfont icon-iconyouxi2'},
				{ title: '绝地求生', icon: 'iconfont icon-juediqiushengshouyou'},
				{ title: 'DNF', icon: 'iconfont icon-dnf'},
				{ title: 'DOTA2', icon: 'iconfont icon-dota'},
				{ title: '更多', icon: 'iconfont icon-a-gengduo'}
			]
        }
    },
	created() {
		this.$http.get('/home')
			.then(({ data }) => {
				this.data = data
			})
	}
}
</script>